body{
    position: relative;
}
//页头
#header{
    height:36px;
    background-color:black;
    .center{
        width:1200px;
        height:36px;
        ul{
            width:600px;
            height:36px;
            float:left;
            display: flex;
            align-items: center;
            li{
                height:12px;
                border-right:1px solid #ccc;
                float: left;
                cursor: pointer;
                a{
                    margin-left:8px;
                    margin-right:8px;
                    color: #ffffff99;
                    
                }
            }
        }
        .sign-in{
            width:507px;
            height:36px;
            float: left;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            div{
                height:14px;
                cursor: pointer;
                border-right:1px solid #ccc;
                a{
                    margin-left:8px;
                    margin-right:8px;
                    color: #ffffff99;
                }
            }
        }
       .cart{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #424242;
        a{
            line-height: 36px;
            color: #ffffff99;
              img{
                margin-right: 5px;
              }
        }
        &:hover{
            color:red;
            cursor: pointer;
          }
       }
    }
   
}
//顶部导航
#nav{
    background-color: #ffffff;
    z-index: 300;
    .center{
        height:74px;
        display: flex;
        align-items: center;
        .img{
            width:103px;
            height:74px;
            background:url('https://res.vmallres.com/portal/1.11.6.303/h5/images/logo_app.png');
            background-size: 103px;
        }
        .Navigation{
            width:1043px;
            line-height: 16px;
            div{
                width:808px;
                margin-left: 8px;
                display: flex;
                justify-content: flex-end;
                align-items: stretch;
                div{
                    font-size:16px;
                    color:rgb(0,0,0);
                    a{
                        &:hover{
                            color:red;
                          }
                    }
                }
            }
        }
        //需要给图片加点击事件
        .Shopping-cart{
            width:50px;
            height:26px;
            display: flex;
            justify-content: flex-end;
            background-color: #ffffff;
            img{
                width:26px;
                height:26px;
                &:hover{
                    cursor: pointer;
                }
            }
        }

    }
}
//遮罩层
.mask{
    width:100%;
    height:74px;
    background-color:#ffffff;
    position: absolute;
    top:36px;
    // opacity: .5;
    left:0px;
    display: none;
   
    div{
      width:640px;
      height:74px;
      margin: auto;
      overflow: hidden;
      div{
        width: 592px;
        height:36px;
        margin-top: 19px;
        border:1px solid black;
        border-radius: 18px;
        display: flex;
        .sp1{
                display:block;
                width:36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                img{
                    width: 12px;
                    height:12px;
                }
        }
        input{
            width:514px;
            height:36px;
            border:none;
        }

        .sp2{
            display:block;
            width:36px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            &:hover{
                cursor: pointer;
            }
        }
      }
    }
    ul{
        width:592px;
        min-height: 48px;
    }
}

//尾部
#footer{
    height: 584px;
    margin-top: 48px;
    background-color: #fff;
    .center{
        height: 584px;
        .afterSales{
            height:120px;
            display: flex;
            justify-content: center;
            align-items: center;
            .box1{
                width:300px;
                height:72px;
                display: flex;
                justify-content: center;
                align-items: center;
                .enterprise{
                    width:209px;
                    height:24px;
                    display: flex;
                    .left{
                        width:24px;
                        height:24px;
                        background: url('../img/footer1.webp');
                        background-size: 24px;
                        margin-right: 10px;
                    }
                    .right{
                        width:169px;
                        height:24px;
                        font-size: 16px;
                    }
                }
                
            }
            .box2{
                width:300px;
                height:72px;
                display: flex;
                justify-content: center;
                align-items: center;
                .enterprise{
                    width:209px;
                    height:24px;
                    display: flex;
                    .left{
                        width:24px;
                        height:24px;
                        background: url('../img/footer2.webp');
                        background-size: 24px;
                        margin-right: 10px;
                    }
                    .right{
                        width:169px;
                        height:24px;
                        font-size: 16px;
                    }
                }
                
            }
            .box3{
                width:300px;
                height:72px;
                display: flex;
                justify-content: center;
                align-items: center;
                .enterprise{
                    width:209px;
                    height:24px;
                    display: flex;
                    .left{
                        width:24px;
                        height:24px;
                        background: url('../img/footer3.webp');
                        background-size: 24px;
                        margin-right: 10px;
                    }
                    .right{
                        width:169px;
                        height:24px;
                        font-size: 16px;
                    }
                }
                
             
            }
            .box4{
                width:300px;
                height:72px;
                display: flex;
                justify-content: center;
                align-items: center;
                .enterprise{
                    width:209px;
                    height:24px;
                    display: flex;
                    .left{
                        width:24px;
                        height:24px;
                        background: url('../img/footer4.webp');
                        background-size: 24px;
                        margin-right: 10px;
                    }
                    .right{
                        width:172px;
                        height:24px;
                        font-size: 16px;
                    }
                }
                
             
            }
        }
        .contact{
            height:213px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            padding-top:56px;
            padding-bottom: 40px;
            display: flex;
            .left{
                width:921px;
                display: flex;
                div{
                    width: 159px;
                    height: 213px;
                    div{
                        font-size: 14px;
                        width: 153px;
                        height:28px;
                        margin-bottom: 32px;
                    }
                    dl{
                        li{
                        width: 153px;
                        height: 27px;
                        font-size: 12px;
                        color:#777777;
                        }
                    }
                }
            }
            .line{
                width:1px;
                height:160px;
                background-color: #ccc;
            }
            .right{
                width: 248px;
                height: 213px;
                .title{
                    width: 248px;
                    height:32px;
                    font-size: 24px;
                    text-align: center;
                }
                .customerService{
                    width: 248px;
                    height:17px;
                    font-size: 13px;
                    margin-top:2px;
                    text-align: center;
                }
                .onlineService{
                    width:248px;
                    height:34px;
                    display: flex;
                    justify-content: center;
                    margin-top: 16px;
                   .box{
                    width:170px;
                    height:34px;
                    line-height: 34px;
                    border:0px solid black;
                    background-color: #000000;
                    border-radius: 18px;
                    display: flex;
                    justify-content: center;
                    div{
                        width: 24px;
                        height:24px;
                        color: #fff;

                    }
                    a{
                        width: 48px;
                        height: 16px;
                        font-size: 12px;
                        margin-left: 7px;
                        color: #fff;
                    }
                   }
                }
                .vmall{
                    width:248px;
                    height:24px;
                    display: flex;
                    margin-top: 21px;
                    display: flex;
                    justify-content: center;
                    h2{
                        width:82px;
                        height:24px;
                        font-size: 12px;
                        margin-left:5px;
                        font-weight: 400;
                    }
                    div{
                        width:126px;
                        height:24px;
                       a{
                        width:24px;
                        height:24px;
                        margin-right: 10px;
                       }
                    }


                }
            }
        }
        .bottom{
            height:78.6px;
            background-color:#fff;
            padding: 33.5px 0px 40px;
            display: flex;
            div{
                width:107px;
                height:20px;
                img{
                    width:80px;
                    height:20px;
                }
            }
            .box{
                width: 793px;
                height: 78px;
                color: rgba(0,0,0,0.6);
                ul{
                    width: 793px;
                    height: 17px;
                    display: flex;
                    margin: -5px 0px 6px;
                    li{
                        font-size: 12px;
                       margin-right:6px;
                       a{
                        padding-right:6px ;
                       }
                    }
                }
             a{
                color: rgba(0,0,0,0.4);
                font-size: 12px;
                line-height: 17px;
             }
            }
            .img{
                width: 90px;
                height:32px;
                margin-left:210px ;
                background:url('../img/logo2.png');
            }
        }
    }
}